<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box1 {
				width: 600px;
				height: 80px;
				background-color: whitesmoke;
				border: 1px solid whitesmoke;
			}
			#box2 {
				width: 600px;
				height: 40px;
				background-color: white;
				margin: 16px 0 0 0;
				border-bottom: 1px solid whitesmoke;
				overflow: hidden;
			}
			#box3 {
				width: 600px;
				height: 40px;
				background-size: cover;
				position: absolute;
				left: 4px;
				top: 52px;
				overflow: hidden;
			}
			button {
				margin: 5px -460px 0 499px;
			}
			p {
				width: 300px;
				height: 40px;
				position: absolute;
				display: inline-block;
			}
			
		</style>
	</head>
	<body>
		<div id="box1">
			<button type="button" id="left">《</button>
			<button type="button" id="right">》</button>
			<div id="box2">
				<div id="box3">
		
				</div>
			</div>
		</div>
		<script src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			var data = ["动物的嘎巴史蒂文动手的", "欧几哦哇的动安慰的话", "派人家我艾吉奥好的", "欧几哦哇的动", "打开本地哈达威的骄傲"];;
			var s = 800;//初始的位置，也是每次循环文字返回的位置px
			var ready="-200px";//每次p循环返回初始位置的临界点
			$(function() {
				$.each(data, function(i, value) {
					$("#box3").append("<p class='p" + i + "'>　" + value + "　</p>");
				});
				
				//每次移动每个P的位置
				$('p').each(function() {
					$(this).css({'left': s});
					s += 200;
				})
				setInterval(function(){
					$("p").each(function() {
					t = $(this).css("left");
					console.log(t);
					 if(t==ready){
						$(this).css({"left":"800px"})
					 }else{
						 $(this).animate({"left":"-=200px"},500)
					 }
				})
				},1000)
			})
		</script>
	</body>
</html>
